---
title: Exemples
description: Exemples avant et après d'Ultracite en action.
---

Pour illustrer les capacités d'Ultracite, voici quelques exemples pratiques de problèmes qu'il détecte et corrige. Chaque exemple montre le code avant (avec un problème) et après l'application d'Ultracite. Ces exemples démontrent comment Ultracite améliore automatiquement le code.

## Formatage automatique du code

### Avant (formatage désordonné)

```tsx title="page.tsx"
function greet(name) { return 'Hello, '+ name + "!!" }
```

Dans ce code, l'espacement et le style de concaténation sont mauvais. Il utilise aussi la concaténation de chaînes au lieu des littéraux de gabarit, et mélange guillemets doubles et simples.

### Après (formaté)

```tsx title="page.tsx"
function greet(name) {
  return `Hello, ${name}!!`;
}
```

Le formateur d'Ultracite a :

- Formaté la fonction avec des retours à la ligne adéquats pour la lisibilité.
- Converti la concaténation de chaînes en littéral de gabarit (cela peut être une correction automatique issue d'une règle de lint suggérant les template strings pour la lisibilité).
- Uniformisé les guillemets en backticks pour le template (et utiliserait des guillemets doubles de manière cohérente ailleurs si ce n'est pas un template).
- Ajouté un point-virgule à la fin de l'instruction `return`.
- Assuré un espacement correct autour des accolades et des parenthèses.

Le développeur n'a pas reformaté le code manuellement — il a simplement enregistré le fichier, et Ultracite s'est chargé du reste. Le résultat est un code plus propre et plus cohérent.

Ultracite avertira également que `name` n'est pas typé et suggérera d'ajouter un type.

## Application de l'égalité stricte

### Avant (bug potentiel avec égalité lâche)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status == 200) {
  isValid = true;
}
```

Ici, le code utilise l'égalité lâche (`==`) pour comparer `response.status` à `200`. L'utilisation de l'égalité lâche peut être source d'erreurs à cause de la conversion de types (par exemple, `response.status` pourrait être une chaîne `"200"` et passerait quand même). Les règles strictes d'Ultracite imposent probablement l'utilisation de `===` pour les comparaisons.

### Après (correction automatique d'Ultracite)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status === 200) { // [!code highlight]
  isValid = true;
}
```

Ultracite a automatiquement remplacé `== 200` par `=== 200`. Ce petit changement évite des bugs subtils. La correction a été appliquée à l'enregistrement dans le cadre des actions `source.fixAll.biome`. Une telle règle (similaire à ESLint’s `eqeqeq`) garantit que les développeurs utilisent des comparaisons d'égalité strictes.

De plus, Ultracite avertira également que `isValid` n'est jamais utilisé et suggérera de le supprimer.

## Organisation et nettoyage des imports

### Avant (imports désorganisés)

```tsx title="index.tsx"
import Z from './z-module';
import A from './a-module';
import React from 'react';
import { helper } from './util';

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Les imports ici ne sont pas dans l'ordre alphabétique, et l'import `helper` n'est jamais utilisé dans le fichier.

### Après (après enregistrement avec Ultracite)

```tsx title="index.tsx"
import React from 'react'; // [!code highlight]
import A from './a-module'; // [!code highlight]
import Z from './z-module'; // [!code highlight]
import { helper } from './util'; // [!code --]

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Ultracite (via la fonctionnalité d'organisation des imports de Biome) a trié les imports par ordre alphabétique selon le nom du module. Il a aussi supprimé automatiquement l'import `helper` inutilisé. La différence avant/après se produit immédiatement à l'enregistrement, garantissant que votre section d'import reste toujours soignée :

- Pas d'imports inutiles encombrant le haut de votre fichier.
- Ordre déterministe des imports (pour que les merges et diffs ne soient pas perturbés par des ordres d'import différents ajoutés par différents développeurs).

Cela conduit à un code plus facile à maintenir, en particulier dans les fichiers comportant de nombreux imports.

## Correction d'accessibilité

### Avant

```tsx title="Button.tsx"
<button onClick={submitForm}>
  Open modal
</button>
```

Le type par défaut d'un bouton est `submit`, ce qui provoque l'envoi d'un formulaire lorsqu'il est placé à l'intérieur d'un élément form. Ce n'est probablement pas le comportement souhaité dans une application React. Ultracite vous avertira à ce sujet et proposera une correction rapide pour changer le type en `button`.

### Après (correction manuelle ou rapide)

```tsx title="Button.tsx"
<button onClick={submitForm} type="button">
  Open modal
</button>
```

Le type est maintenant `button`, ce qui empêche l'envoi d'un formulaire parent potentiel lorsque le bouton est cliqué.

---

Ces exemples montrent comment Ultracite améliore la qualité du code :

- Formatage et cohérence stylistique sans effort.
- Corrections automatiques pour de nombreux problèmes courants (vous n'avez donc que rarement à corriger manuellement des choses triviales).
- Identification des vrais problèmes (pour que vous puissiez les corriger tôt dans le développement).

En utilisant Ultracite, votre code reste non seulement propre, mais aussi moins bogué et plus accessible, grâce au savoir collectif encodé dans ses règles.